import { NCard, NTab, NTabs } from "naive-ui";
export default defineComponent({
  name: "System",
  components: {
    Account: defineAsyncComponent(() => import("./_Part/Account")),
    Department: defineAsyncComponent(() => import("./_Part/Department")),
    Roles: defineAsyncComponent(() => import("./_Part/Roles")),
  },
  setup() {
    let activeTab = ref("Account");
    const handleUpdate = (val: string) => {
      activeTab.value = val;
    };
    return () => (
      <div class=" h-full flex flex-col">
        <NCard
          bordered={false}
          contentStyle={{
            padding: "4px 12px 8px 12px",
          }}
        >
          <NTabs
            v-model:value={activeTab.value}
            onUpdateValue={(val) => {
              handleUpdate(val);
            }}
          >
            <NTab name="Account">账号管理</NTab>
            <NTab name="Department">部门管理</NTab>
            <NTab name="Roles">角色管理</NTab>
          </NTabs>
        </NCard>
        {h(resolveComponent(activeTab.value))}
      </div>
    );
  },
});
